<!--
  功能：实训出勤
  作者：licy
  邮箱：licy@briup.com
  时间：2020年12月15日 15:02:38
  版本：v1.0
  修改记录：
  修改内容：
  修改人员：
  修改时间：
-->
<template>
  <div class='attendance_import'>
    {{param}}
    <div>
      {{form}}
    </div>
    <div class="page_title">1. 选择考勤时间</div>
    <div class="box">
      <el-date-picker v-model="form.date" value-format="timestamp" type="date" placeholder="选择日期" />
      <div style="padding:2em 0">
        <el-radio-group v-model="form.stage">
          <el-radio :label="1">上午</el-radio>
          <el-radio :label="2">下午</el-radio>
          <el-radio :label="3">晚上</el-radio>
        </el-radio-group>
      </div>
    </div>
    <div class="page_title">2. 选择实训班级</div>
    <div class="box">
      <el-select v-model="param.year" placeholder="年度" style="width:100px" clearable>
        <el-option label="2020" value="2020"></el-option>
        <el-option label="2021" value="2021"></el-option>
        <el-option label="2022" value="2022"></el-option>
        <el-option label="2023" value="2023"></el-option>
        <el-option label="2024" value="2024"></el-option>
      </el-select>
      <el-cascader filterable style="width:400px" v-model="param.channelId" clearable :options="channels" placeholder="请选择院校渠道"
      :props="{ children:'children',label:'name',value:'id', emitPath: false}" ></el-cascader>
      <el-select v-model="param.trainId" @change="trainIdChangeHandler">
        <el-option v-for="t in trainData.list" :key="t.id" :label="t.name" :value="t.id"></el-option>
      </el-select>
    </div>
    <div class="page_title">3. 录入考勤信息</div>

    <div class="btns">
      <el-form inline size="small">
        <el-form-item>
          <el-input v-model="param.realname" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button plain type="primary" icon="el-icon-search" @click="loadStudents">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div v-if="form.date && param.trainId">
      <div class="student_list" >
        <div class="student" v-for="s in studentData.list" :key="s.id">
          <div class="photo">
            <img src="http://121.199.29.84:8888/group1/M00/00/12/rBD-SV-Td6-Aawn0AACq962TS9c719.jpg" alt="">
          </div>
          <div class="info">
            <span><el-checkbox v-model="form.ids" :label="s.id">{{s.realname}}</el-checkbox></span>
          </div>
        </div>
      </div>
      <div class="btns" style="text-align:right">
        <el-button size="mini" type="warning" @click="saveAttendance('迟到')">迟到</el-button>
        <el-button size="mini" type="warning" @click="saveAttendance('早退')">早退</el-button>
        <el-button size="mini" type="danger" @click="saveAttendance('缺课')">缺课</el-button>
      </div>
    </div>
   
    <div v-else style="color:red;text-align:center;padding:3em 0">
      请先选择日期和实训
    </div>

    <div class="page_title">4. 查看考勤信息</div>
    <div class="box" v-if="form.date && param.trainId">
      <el-table :data="attendanceData.list" size="small" v-loading="loading" border >
        <el-table-column type="selection" width="55" align="center" fixed="left" > </el-table-column>
        <el-table-column type="index" :index="1" label="序号" align="center" fixed="left"/>
        <el-table-column prop="student.realname" label="姓名" width="100" align="center" fixed="left" />
        <el-table-column label="性别" prop="student.gender" width="60" align="center" fixed="left"/>
        <el-table-column label="考勤" >
          <template slot-scope="scope">
            {{scope.row.attendanceStage}}: {{scope.row.status}}
          </template>
        </el-table-column>
        <el-table-column label="考勤" align="center">
          <el-table-column label="上午" align="center"></el-table-column>
          <el-table-column label="下午" align="center"></el-table-column>
          <el-table-column label="晚上" align="center"></el-table-column>
        </el-table-column>
      </el-table>
      <div style="text-align:right;padding-top:1em">
        <el-button size="small" type="primary">提交</el-button>
      </div>
    </div>
    <div v-else style="color:red;text-align:center;padding:3em 0">
      请先选择日期和班级
    </div>
  </div>
</template>

<script>
import {get,post} from '@/utils/request'
import _ from 'lodash'
import qs from 'qs'
import {mapGetters} from 'vuex'
export default {
  // 组件名称
  name: 'demo',
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data () {
   return {
     loading:false,
     form:{
      ids:[]
     },
     param:{
       page:1,
       pageSize:10,
       year: new Date().getFullYear()
     },
     studentData:{list:[]},
     attendanceData:{list:[]},
     trainData:{list:[]}
   }
  },
  // 计算属性
  computed: {
    ...mapGetters(['channels']),
    attendanceDataFmt(){
      let result = new Map();
      for(let a of this.attendanceData.list){
        // 如果包含
        if(result.has(a.studentId)){

        } else {
          result.set(a.studentId,)
        }
      }
      return result;
    }
  },
  // 侦听器
  watch: {
  },
  // 组件方法
  methods: {
    // 实训变化处理函数
    trainIdChangeHandler(){
      // 更新学生、考勤信息
      this.loadStudents();
      this.loadAttendances();
    },
    // 保存考勤信息
    saveAttendance(status){
      let data = _.clone(this.form);
      data.status = status;
      let url = "/studentAttendance/batchSave"
      post(url,data).then(response => {
        this.$message({ message: response.message, type: 'success' })
        this.loadAttendances();
      });
    },
    // 加载考勤信息
    loadAttendances(){
      let url = "/studentAttendance/pageQueryTrain"
      let param = _.clone(this.param);
      get(url,param).then(response => {
        this.attendanceData = response.data;
      })
    },
    loadStudents(){
      this.loading = true;
      let url = '/studentTrain/pageQuery'
      let param = _.clone(this.param);
      if(param.channelId){
        param.channelIds = [param.channelId]
      }
      get(url+"?"+qs.stringify(param,{ arrayFormat: 'repeat' }))
      .then(response => {
        this.studentData = response.data
        this.loading = false;
      })
    },
     // 查询实训信息
    loadTrains(){
      // 添加loading,页面加载开始
      this.loading = true;
      let url = "/train/pageQuery"
      get(url,{page:1,pageSize:10}).then(response => {
        this.trainData = response.data;
        // 页面加载结束
        this.loading = false;
      })
    },
    initParam(){
      let now = new Date();
      this.form.date = now.getTime();
      let stage = 1;
      if(now.getHours() > 13 && now.getHours() < 18){
        stage = 2;
      } else if(now.getHours() > 18) {
        stage = 3;
      }
      this.form = {
        ...this.form,
        stage
      } ;
    }
  },
  // 以下是生命周期钩子
  /**
  * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
  */
  created () {
    this.initParam();
    this.loadTrains();
  },
  /**
  * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
  * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
  */
  mounted () {
  },
  /**
  * 实例销毁之前调用。在这一步，实例仍然完全可用。
  */
  beforeDestroy () {
  },
  /**
  * Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，
  * 所有的事件监听器会被移除，所有的子实例也会被销毁。
  */
  destroyed () {
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<!--然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，-->
<!--这么设计的目的是父组件可以对子组件根元素进行布局。-->
<style scoped lang="scss">

.student_list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding: 1em 0;
  .student {
    width: 60px;
    text-align: center;
    margin-right: 15px;
    margin-bottom: 10px;
    
    .photo {
      height: 60px;
      border-radius: 50%;
      background-color: #f9f9f9;
      overflow: hidden;
      img {
        height: 100%;
      }
    }
    .info {
        line-height: 3em;
      }
  }
}



.attendance_import {
  font-size: 12px;
  .page_title {
    text-align: left;
    height: 30px;
    padding:0 2em;
    line-height: 30px;
    background-color: #f4f4f4;
    border-radius: 5px;
    color: #666;
    margin-bottom: .5em;
  }
  .box {
    text-align: center;
    padding: 1em 0;
  }
}
</style>
